{extend name='extra@admin/content' /}

{block name="button"}
<div class="nowrap pull-right" style="margin-top:10px">
    <button data-open='{:url("$classuri/")}' data-title="返回列表" class='layui-btn layui-btn-small'><i class='fa fa-arrow-left'></i> 返回列表</button>
</div>
{/block}

{block name='content'}

<!--右侧编辑区 开始-->
<div class="panel panel-default article-right" style="overflow:hidden;width: 960px;">
    <div class="panel-heading">内容编辑</div>
    <div class="panel-body">
        <form class="form-horizontal" action="{:url()}" data-auto="true" method="post">

            <div class="form-group">
                <div class="col-md-12">
                    <div class="input-group">
                        <span class="input-group-addon rw12">用户昵称</span>
                        <input class="layui-input" maxlength="200" name="nick_name" value="{$vo.nick_name|default=''}" placeholder="请输入用户昵称">
                        <input type="hidden" name="id" value='{$vo.id|default=""}'>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-12">
                    <div class="input-group">
                        <span class="input-group-addon rw12">用户真名</span>
                        <input class="layui-input" maxlength="200" name="real_name" value="{$vo.real_name|default=''}" placeholder="请输入用户真名">
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-12">
                    <div class="input-group">
                        <span class="input-group-addon rw12">手机号码</span>
                        <input type="tel" autofocus class="layui-input" required="required" pattern="^1[3-9][0-9]{9}$" title="手机号码不能为空哦" name="mobile" value="{$vo.mobile|default=''}" placeholder="请输入用户手机号码">
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-12">
                    <div class="input-group">
                        <span class="input-group-addon rw12">身份证号码</span>
                        <input class="layui-input" name="identification" value="{$vo.identification|default=''}" placeholder="请输入用户身份证号码">
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-12">
                    <div class="form-control" style="height:auto">
                        <label style="color:#333;font-size: 12px;">上传图像</label>
                        <div class="row nowrap">
                            <div class="col-xs-3" style="width:160px;">
                                <div class="upload-image-box" style="background-image: url({$vo.cover|default='/static/plugs/uploader/theme/image.png'})">
                                    <input value="{$vo.cover|default='/static/plugs/uploader/theme/image.png'}" type="hidden" name="cover">
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <br>
                                <a data-file="one" data-type="jpg,png,jpeg" data-field="cover" class="btn btn-sm">上传图像</a>
                            </div>
                        </div>
                        <p class="help-block" style="margin-top:10px;color:#ccc;font-size: 12px;">封面大图片建议尺寸：640像素 * 480像素</p>
                    </div>
                </div>
            </div>

            <div class="form-actions">
                <div class="row">
                    <div class="col-md-offset-4 col-md-9">
                        <button class="layui-btn" type='submit'>保存信息</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<!--右侧编辑区 结束-->

{/block}


{block name='script'}
<script>
    window.form.render();
    $(function () {
        $('body').on('change', '.upload-image-box input', function () {
            $('.news-item.active').css('background-image', 'url(' + this.value + ')');
            $(this).parent('.upload-image-box').css('background-image', 'url(' + this.value + ')');
        });
    });
</script>
{/block}

{block name="style"}
<style>
    .panel{border-radius:0}
    .article-right {position:absolute;left:20px;position:absolute;}
    .article-right .layui-input{border-radius:0;border:1px solid #e5e6e7;}
    .article-right .layui-input:hover, .news-right .layui-input:focus{border-color:#e5e6e7!important;}
    .article-right .input-group-addon{background:#fff;border-radius:0;border-color:#e5e6e7;}
    .article-right .upload-image-box{width:150px;height:120px;background-size:cover;background-position:center center;}
</style>
{/block}